<template>
  <div>
    <b-container fluid class="banner d-none d-sm-block"></b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11" class="content-nav">
          <div class="d-none d-sm-block page-breadcrumb">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item>我们的产品</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class="category-selector">
            <a-menu
              v-model="currentActiveCategories"
              mode="horizontal"
              @select="onCategoryItemSelected"
            >
              <a-menu-item :key="0">全部</a-menu-item>
              <a-menu-item
                v-for="category in productCategories"
                :key="category.id"
              >
                {{ category.name }}
              </a-menu-item>
            </a-menu>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <product-list :products="products" :img-domain="imgDomain" />
    <div class="pagination">
      <a-pagination
        v-model="currentPage"
        :total="productCount"
        :page-size="pageSize"
        @change="onPaginationChanged"
      />
    </div>
  </div>
</template>

<script>
import ProductList from '@/components/sections/ProductList';
import siteConfig from '@/assets/config/site';

const CATEGORY_API = `${siteConfig.apiPrefix}${siteConfig.apis.category}`;
const PRODUCT_API = `${siteConfig.apiPrefix}${siteConfig.apis.product}`;

export default {
  categoryAPI: CATEGORY_API,
  productAPI: PRODUCT_API,
  components: {
    ProductList,
  },
  layout: 'staticBanner',
  head() {
    return {
      title: '我们的产品',
    };
  },
  data() {
    return {
      productCategories: [],
      currentActiveCategories: [],
      products: [],
      productCount: 0,
      imgDomain: '',
      currentPage: 1,
      pageSize: 12,
    };
  },
  computed: {
    currentActiveCategory() {
      if (this.currentActiveCategories.length === 0) {
        return null;
      }
      return this.currentActiveCategories[0];
    },
  },
  async asyncData({ $axios }) {
    let productCategories = [];
    const currentActiveCategories = [0];
    try {
      const data = (await $axios.$get(CATEGORY_API, {
        params: { type: 'product' },
      })).data;
      productCategories = data.entries;
    } catch (err) {
      productCategories = [];
    }
    let products = [];
    let productCount = 0;
    let imgDomain = '';
    let currentPage = 0;
    let pageSize = 12;
    try {
      const data = (await $axios.$get(PRODUCT_API)).data;
      products = data.entries;
      productCount = data.count;
      imgDomain = data.domain;
      currentPage = data.page + 1;
      pageSize = data.page_size;
    } catch (err) {
      products = [];
      productCount = 0;
      imgDomain = '';
      currentPage = 0;
      pageSize = 12;
    }
    return {
      productCategories,
      currentActiveCategories,
      products,
      productCount,
      imgDomain,
      currentPage,
      pageSize,
    };
  },
  async mounted() {
    if (this.productCategories.length === 0) {
      await this.loadProductCategories();
    }
    if (this.currentPage === 0) {
      await this.loadProducts();
    }
  },
  methods: {
    async loadProductCategories() {
      try {
        const data = (await this.$axios.$get(this.$options.categoryAPI, {
          params: { type: 'product' },
        })).data;
        this.productCategories = data.entries;
      } catch (err) {}
    },
    async loadProducts(page = 1, category = 0) {
      try {
        const data = (await this.$axios.$get(this.$options.productAPI, {
          params: {
            page: page - 1,
            category,
          },
        })).data;
        this.products = data.entries;
        this.productCount = data.count;
        this.imgDomain = data.domain;
        this.currentPage = page;
        this.pageSize = data.page_size;
        // this.currentPage = parseInt(data.page) + 1;
      } catch (err) {
        this.$message.error('网络错误，请稍后再试');
      }
    },
    onCategoryItemSelected({ key }) {
      this.loadProducts(1, key);
    },
    async onPaginationChanged(page) {
      await this.loadProducts(page, this.currentActiveCategory);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 330px;
  background-image: url('/images/header-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>

<style lang="scss" scoped>
.content-nav {
  margin: 24px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  @include media-breakpoint-down(xs) {
    margin-bottom: 0px;
  }
}
.page-breadcrumb {
  flex: 1 0 33.3%;
}
.category-selector {
  margin-left: auto;
  @include media-breakpoint-down(xs) {
    width: 100%;
  }
  .ant-menu-horizontal {
    line-height: unset;
  }
  .ant-menu-item {
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 28px;
    letter-spacing: normal;
    color: #666666;
  }
}
.pagination {
  margin: 24px 0px 36px;
  display: flex;
  justify-content: center;
}
</style>
